<div class="container_12">

	<div id="TableContainer">
	</div>	
	
	<button id="reloadButton">reload</button>	
	<button id="newButton">new</button>	
	<button id="createOfferButton">criar oferta</button>	
	<p class="tmpClass other">click here</p>
	<div id="tmp10">tmp10</div>
	
</div>




<div id="createOfferDialog" class="dialog" title="Criar Oferta">
	<div class="createOfferContainer">
	
		<div class="row1 rowContainer">
			<p class="label">Nome:</p>
			<input class="input-name" id="offerNameVal" type="text" name="">
			<p class="activeLabel">Activo:</p>
			<input class="input" id="offerActiveVal" type="checkbox" name="" checked="checked">
		</div>
		
		<div class="row2 descriptionContainer">
			<p class="label">Descrição:</p>
			<textarea class="descriptionTextArea" id="offerDescriptionVal" name="description"></textarea>
		</div>
		
		<div class="row3 rowContainer">
			<p class="longLabel">Participantes entre:</p>
			<input class="part" id="offerPartMinVal" type="text" name=""> <p class="text">e</p> <input class="part" id="offerPartMaxVal" type="text" name="">
		</div>
		
		<div class="row4 rowContainer">
			<p class="longLabel">Numero de aulas:</p>
			<input class="input" id="offerNumberOfClassesVal" type="text" name="">
			<p class="levelLabel">Nivel:</p>
			<select class="input-level" id="offerLevelVal" name="level">
				<option value="beginner">beginner</option>
				<option value="advanced">Advanced</option>
			</select>
		</div>
		
		<div class="row5 rowContainer">
			<p class="longLabel">Preço:</p>
			<input class="input" id="offerPriceVal" type="text" name="">
		</div>
		
	</div>
</div>


<div id="createExtraDialog" class="dialog" title="Criar Oferta">
	<select id="extraList">
	</select>
</div>

<div id="deleteExtraConfirmation" class="dialog" title="remover extra">
	<p>Tem a certeza que pretende remover este extra da oferta?</p>
</div>


<script>
$(document).ready(function() {
	
	$('#reloadButton').on('click', function() {
		$('#TableContainer').jtable('reload',
				function() {
					//alert('reloaded');
				}
		);
	});

	$('.jtable-command-button').on('click',function(event) {
		event.preventDefault();
		alert('hello');
	});
	
	$('#newButton').on('click',function(event) {
		alert('newbutton');
	});

	
	$('#createOfferButton').on('click', function() {
		
		$('#TableContainer').jtable('addRecord', {
		    record: {
		        name: 'tmp name',
		        price: '90',
		        numberOfClasses: '2',
		        //remainingClasses: '2',
		        level: 'beginner',
		        minPart: '2',
		        maxPart: '4',
		        active: '1',
		        description: 'tmp description'
		    },
		    clientOnly:			true,
		    animationsEnabled:	true,
		    //url:				window.ajaxUrl + '/createOfferProgrammatically', // url to update record, if not defined jtable default url will be used
		    success:	function() {
		    },
		    error:		function() {
		    }
		});
	});





	// ... when user click's to create a new offer 
	$('#TableContainer .jtable-add-record a').on('click',function(event) {
		
		// disable events defined by jtable
		event.stopPropagation();

		var properties = {
			width:		700,
			height:		420,
			show: 		'fade',
			hide: 		'fade',
			buttons: {
				"Ok": 		
				function() {
					var data = $('#createOfferDialog');
					
					var name 		= data.find('#offerNameVal').val();
					var active 		= '1';
					
					if (data.find('#offerActiveVal:checked').val()!=undefined)
						active 		= '1';
					else
						active 		= '0';
					
					var description = data.find('#offerDescriptionVal').val();
					var minPart 	= data.find('#offerPartMinVal').val();
					var maxPart 	= data.find('#offerPartMaxVal').val();
					var numClasses 	= data.find('#offerNumberOfClassesVal').val();
					var price		= data.find('#offerPriceVal').val();
					var level		= data.find('#offerLevelVal').val();
					
					$('#TableContainer').jtable('addRecord', {
					    record: {
					        name: 				name,
					        price: 				price,
					        numberOfClasses:	numClasses,
					        level: 				level,
					        minPart: 			minPart,
					        maxPart: 			maxPart,
					        active: 			active,
					        description: 		description
					    },
					    clientOnly:			false,
					    animationsEnabled:	true,
					    //url:				window.ajaxUrl + '/createOfferProgrammatically', // url to update record, if not defined jtable default url will be used
					    success:	function() {
					    },
					    error:		function() {
					    }
					});
					
					// reload table
					//$('#TableContainer').jtable('reload');
					$(this).dialog("close");
				}
			}
		};
			
		$("#createOfferDialog").dialog(properties);
	});


	

	
});
</script>
